<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="甘忠祥">
    <title>千图网</title>
    <link rel="stylesheet" href="qiantu.css">
</head>

<body>
    <nav class="nav">
        <div class="container">
            <ul class="nav-list clearfix">
                <li class="first"><a href="#">首页</a></li>
                <ul id="one">
                <li class="one_list"><a href="#">所有分类</a>
                    <ul class="two">
                        <li>平面广告</li>
                        <li>电商淘宝</li>
                        <li>背景</li>
                        <li>设计元素</li>
                    </ul>
                </li>
                </ul>
                <li><a href="#">设计创意</a></li>
                <li><a href="#">办公创意</a></li>
                <li><a href="#">· · ·</a></li>
            </ul>
        </div>
        <div class="container">
            <ul class="dl-list">
                <span class="icon-vip"></span>
                <li><a href="#">VIP中心</a></li>
                <li><a href="#" id="dl">请登录</a></li>
                <li><a href="#" id="zc">免费注册</a></li>
            </ul>
        </div>

    </nav>
    <div class="container logo clearfix">
        <div>
            <img src="./img/logo.png" alt="">
            <div class="input">
                <div class="input1">全站</div>
                <div class="input2"><input type="text" placeholder="800万免费素材任意下载"></div>
                <div id="search">
                    <p><a href="">搜索</a></p>
                </div>
            </div>
            <p id="hot"><span>热门搜索：</span>
                <a href="#" style="margin-left:10px;color:#30CD71;">七夕</a>
                <a href="#" style="margin-left:10px;">详情页</a>
                <a href="#" style="margin-left:10px;color:#30CD71;">icon</a>
                <a href="#" style="margin-left:10px;">主图</a>
                <a href="#" style="margin-left:10px;color:#30CD71;">秋季</a>
                <a href="#" style="margin-left:10px;color:#30CD71;">PPT模板</a>
                <a href="#" style="margin-left:10px;">EXCEL模板</a>
                <a href="#" style="margin-left:10px;">首页</a>
                <a href="#" style="margin-left:10px;">个人简历</a>
                <a href="#" style="margin-left:10px;color:#30CD71;">装饰画</a>
            </p>
        </div>
    </div>
    <div class="container logo move clearfix">
        <div>
            <img src="./img/logo.png" alt="">
            <div class="input">
                <div class="input1">全站</div>
                <div class="input2"><input type="text" placeholder="800万免费素材任意下载"></div>
                <div id="search">
                    <p><a href="">搜索</a></p>
                </div>
            </div>
            <ul class="dl-list">
                <span class="icon-vip"></span>
                <li><a href="#">VIP中心</a></li>
                <li><a href="#" id="dl">请登录</a></li>
                <li><a href="#" id="zc">免费注册</a></li>
            </ul>

        </div>
    </div>
    <div class="banner">
        <div class="box">
            <ul class="img-list">
                <li class="current"><a href="#"><img src="img/banner01.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner02.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner03.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner04.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner05.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner06.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner07.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner08.jpg" alt=""></a></li>
            </ul>
            <ul class="indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="img-click">
                <span class="prev">&lsaquo;</span>
                <span class="next">&rsaquo;</span>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="jingxuan clearfix">
            <span class="icon-jx"></span>
            <p id="jingxuan" style="font-size:20px;">精选专题</p>
            <p id="jingxuan1"><a href="#">100万党建素材、PPT汇报模板无限下载，每天仅需0.18元立享VIP特权</a></p>
            <span><a href="#">更多 >></a></span>
        </div>
        <div class="zhuanti">
            <ul>
                <li><a href="#"><img src="./img/jxzt01.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/jxzt02.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/jxzt03.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/jxzt04.jpg" alt=""></a></li>
            </ul>
            <div class="zt-text flower">
                <p><span>和鲜花有关</span><br><em>鲜花是如何拯救世界的</em></p>
            </div>
            <div class="zt-text love">
                <p><span>爱的元素背景</span><br><em>七夕到，为你的设计锦上添花</em></p>
            </div>
            <div class="zt-text back">
                <p><span>鲜花背景精选</span><br><em>为你的设计锦上添花</em></p>
            </div>
            <div class="zt-text leaf">
                <p><span>树叶背景元素精选</span><br><em>一叶而知秋</em></p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="shangyong clearfix">
            <span class="icon-sy"></span>
            <p id="shangyong" style="font-size:20px;">商用海报</p>
            <ul>
                <li><a href="#">招聘海报</a></li>
                <li><a href="#">配图海报</a></li>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">促销海报</a></li>
                <li><a href="#">原创插画</a></li>
            </ul>
            <span><a href="#">更多 >></a></span>
        </div>
        <div class="haibao">
            <ul class="image">

                <li>
                     <a href="#"><img src="./img/syhb01.jpg" alt=""> 
                    <div class="haibao-before">
                        <div class="haibao-back">

                        </div>
                    <div class="icon-tb" onclick="">
                        <a href=""><span class="icon-xz"></span></a>
                        <a href=""><span class="icon-sc"></span></a>
                    </div>
                    </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="./img/syhb02.jpg" alt="">
                    <div class="haibao-before">
                        <div class="haibao-back">

                        </div>
                    <div class="icon-tb">
                        <a href=""><span class="icon-xz"></span></a>
                        <a href=""><span class="icon-sc"></span></a>
                    </div>
                    </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="./img/syhb03.jpg" alt="">
                    <div class="haibao-before">
                        <div class="haibao-back">

                        </div>
                    <div class="icon-tb">
                        <a href=""><span class="icon-xz"></span></a>
                        <a href=""><span class="icon-sc"></span></a>
                    </div>
                    </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="./img/syhb04.jpg" alt="">
                    <div class="haibao-before">
                        <div class="haibao-back">

                        </div>
                    <div class="icon-tb">
                        <a href=""><span class="icon-xz"></span></a>
                        <a href=""><span class="icon-sc"></span></a>
                    </div>
                    </div>
                    </a>
                </li>
    </ul>
    </div>
    </div>


    <main></main>
    <footer>
        <div class="container info clearfix">
            <ul class="problem">
                <h3>常见问题</h3>
                <li><a href="#">成为特邀设计师</a></li>
                <li><a href="#">成为原创贡献者</a></li>
                <li><a href="#">注册登录</a></li>
                <li><a href="#">账号/密码</a></li>
                <li><a href="#">充值/售后</a></li>
                <li><a href="#">版权投诉</a></li>
            </ul>
            <ul class="about">
                <h3>关于千图网</h3>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">媒体报道</a></li>
                <li><a href="#">加入我们</a></li>
                <li><a href="#">心系千图</a></li>
                <li><a href="#">每日最新</a></li>
            </ul>
            <ul class="serve">
                <h3>产品服务</h3>
                <li><a href="#">官方博客</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">千图导航</a></li>
            </ul>
            <ul class="link">
                <h3>友情链接</h3>
                <li><a href="#">我图网</a></li>
                <li><a href="#">千库网</a></li>
                <li><a href="#">摄图网</a></li>
                <li><a href="#">包图网</a></li>
                <li><a href="#">视达网</a></li>
                <li><a href="#">更多>></a></li>
            </ul>
            <div class="zixun">
                <h2>客服咨询</h2>
                <p>400-998-7011 <span>（9:00-18:00）</span></p>
                <p>feedback@58pic.com</p>
                <button><span class="icon-chat"></span>点我交谈</button>
            </div>
        </div>
        <div class="container copyright">
            <hr>
            <span><a href="#"><img src="./img/qq.png" alt=""></a></span>
            <span><a href="#"><img src="./img/pengyouquan.png" alt=""></a></span>
            <ul class="shengming">
                <li><a href="#">注册声明</a></li>
                <li><a href="#">版权声明</a></li>
                <li><a href="#">售后服务</a></li>
            </ul>
            <p>Copyright ©2013-2017 千图网 沪ICP备10011451号-6上海工商 安全实名验证 信用网站</p>
        </div>
    </footer>
</body>
<script>
    window.onload = function () {
        // 第一步找标签
        var box = document.querySelector('.box');
        var imgLis = document.querySelectorAll('.img-list li');
        var indicatorLis = document.querySelectorAll('.indicator li');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var banner = document.querySelector('.banner');
        var color = ['#040404', '#ffff0f', '#fdf100', '#2d9aff', '#89dce3', '#fef8c3', '#110204', '#f4cad8'];
        var index = 0; //当前的索引值
        // 上一张
        function prevImg() {
            index = index == 0 ? index = imgLis.length - 1 : index - 1;
            showImg();
        }
        // 下一张
        function nextImg() {
            index = index == imgLis.length - 1 ? 0 : index + 1;
            showImg();
        }
        // 展示图片
        function showImg() {
            for (var i = 0; i < imgLis.length; i++) {
                imgLis[i].className = '';
                indicatorLis[i].className = '';
                banner.style.backgroundColor = '';
            }
            imgLis[index].className = 'current';
            indicatorLis[index].className = 'active';
            banner.style.backgroundColor = color[index];
        }
        // 1.自动切换图片
        var timer = setInterval(nextImg, 1500);
        // 2.图片跟随指示灯切换
        for (var i = 0; i < indicatorLis.length; i++) {
            indicatorLis[i].index = i;
            indicatorLis[i].onmouseover = function () {
                // 鼠标进来 暂停自动切换
                clearInterval(timer);
                // 根据鼠标选中的指示灯的索引切换图片
                // 并记录和更新index的值
                index = this.index;
                showImg();
            }
            indicatorLis[i].onmouseout = function () {
                // 鼠标出来 开始自动切换 
                timer = setInterval(nextImg, 1000);
            }
        }
        // 点击按钮切换
        box.onmouseover = function () {
            clearInterval(timer);
            timer = null;
            prev.style.display = 'block';
            next.style.display = 'block';
        }
        box.onmouseout = function () {
            if (timer) return;
            timer = setInterval(nextImg, 1000);
            prev.style.display = 'none';
            next.style.display = 'none';
        }
        // 点击 上一张
        prev.onclick = function () {
            prevImg();
        }
        // 点击下一张
        next.onclick = function () {
            nextImg();
        }
        // nav的页面滚动事件
        var nav = document.querySelector('.move');
        window.onscroll = function () {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            console.log(scrollTop);

            if (scrollTop >= 200) {
                nav.style.position = 'fixed';
                nav.style.top = '0';
                nav.style.display = 'block'
            } else {
                nav.style.position = 'static';
                nav.style.display = 'none'


            }

        }
        // 海报的鼠标事件
        var imgList = document.querySelectorAll('.haibao li');
        var cover = document.querySelectorAll('.haibao-before');
        var donghua = document.querySelectorAll('.icon-tb');
        for (var i = 0; i < imgList.length; i++){
            imgList[i].index = i;
            imgList[i].onmouseover = function(){
                console.log(this.index);
                cover[this.index].style.display = 'block';
            }

            imgList[i].onmouseout = function(){
                console.log('111');
                cover[this.index].style.display = 'none';   
            }
        }
        // 下拉列表
        var oUl=document.getElementById('one');
        var aLi=document.querySelectorAll('.two')
            for (i=0; i<aLi.length;i++){ 
                oUl.onmouseover=function(){
                     aLi.style.display='block'; 
                     } 
                oUl.onmouseout=function(){
                    aLi.style.display='none' ;
             } 
             } 


    }

</script>

</html>